<template>
  <div class="seven_content myStyle">
    <!-- <div class="content_center"> -->
    <div class="echartsBox">
      <StrokeTitle4
        title="统计信息"
        class="title_box_bc"
        style="width: 100%; height: 13%; margin-bottom: 1.5vh"
        height="4.26364rem"
      >
        <div class="flex_center" slot="select">
          <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            label-width="68px"
            style="
              background: none !important;
              margin-left: 30px;
              margin-top: 3px;
            "
          >
            <el-form-item label="所属基地">
              <ElementSelect
                ref="psNameSelect"
                :isSelected="true"
                @select="selectListAll"
                :isFilterable="false"
                url="/basic/factory/selectList"
                :settings="{
                  placeholder: '请选择',
                  isSelected: true,
                  isMultiple: false,
                  label: 'name',
                  value: 'deptId',
                }"
                response="data"
                size=""
              />
            </el-form-item>
            <el-form-item label="物资类型">
              <treeselect
                v-model="queryParams.typeId"
                :options="configOptions"
                placeholder="请选择类型"
                :normalizer="normalizer"
                :searchable="false"
                :appendToBody="true"
              />
            </el-form-item>
            <el-form-item label="所属仓库">
              <el-select
                v-model="queryParams.depotId"
                placeholder="请选择仓库"
                clearable
                @change="changeDeptoId"
                style="width: 100px"
              >
                <el-option
                  v-for="depot in depotOptions"
                  :key="depot.id"
                  :label="depot.name"
                  :value="depot.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="Echarts flex_center" slot="content">
          <StrokeItem3
            title="种类"
            :number="infoData.typeNum || 0"
            unit="种"
            style="margin-bottom: 0; width: 220px; margin-left: -170px"
          />
          <StrokeItem3
            title="库存数量"
            :number="infoData.stockNum || 0"
            style="margin-bottom: 0; width: 220px; margin-left: 10px"
          />
          <StrokeItem3
            title="总额"
            :number="infoData.stockMoney || 0"
            unit="元"
            style="margin-bottom: 0; width: 240px; margin-left: 10px"
          />

          <ElementRadio
            style="position: absolute; right: 10px"
            v-model="model"
            :isButton="true"
            @change="radioChange2"
          />
        </div>
      </StrokeTitle4>
      <!-- 实际计划分类完成度 -->
      <StrokeTitle4
        title="实际计划完成度（标准箱/桶）"
        class="float title_box_bc"
        style="width: 100%; height: 12%; margin-bottom: 1.5vh"
      >
        <div class="flex_center" slot="select">
          <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange1" :isCustomize="true" /> -->
        </div>
        <div class="Echarts flex_center" slot="content">
          <!-- <div class="calculagraph_left">
              <Ring
                style="width: 120px; height: 120px"
                :data="{ allRate: data1.finishCount }"
                :subtext="data1.allRate"
                titleTop="38%"
              />
              <div class="label" style="margin-top: -10px; background: none">
                已完成数量/占比
              </div>
            </div> -->
          <!-- <div class="calculagraph_right"> -->
          <StrokeItem
            title="已完成数量"
            style="width: 170px; margin-right: 8px"
            :number="data1.finishCount"
          />
          <StrokeItem
            title="占比"
            style="width: 130px; margin-right: 8px"
            :number="data1.allRate"
          />
          <StrokeItem
            title="总计划量"
            style="width: 170px; margin-right: 8px"
            :number="data1.allCount"
          />
          <StrokeItem
            title="上期"
            style="width: 170px; margin-right: 8px"
            :number="data1.lastAllCount"
          />
          <StrokeItem
            title="环比"
            style="width: 130px; margin-right: 8px"
            :number="data1.momRate"
            unit="%"
          />
          <!-- <div class="label" style="margin-top: 1px; background: none">
                单位：标准箱
              </div> -->
          <!-- </div> -->
        </div>
      </StrokeTitle4>
      <!-- 实际计划完成度 -->
      <StrokeTitle4
        title="生产计划统计（标准箱/桶）"
        class="title_box_bc"
        style="width: 100%; height: 26.4%; margin-bottom: 1.5vh"
      >
        <div class="flex_center" slot="select"></div>
        <MoreDirection2
          slot="content"
          :ySplitLineShow="false"
          :yAxisLineShow="true"
          :xAxisLineShow="true"
          class="sctjEcharts"
          :legendData="['实际生产', '未生产']"
          :isLegend="false"
          :data="data2"
          unit="%"
          gridRight="1.3%"
          gridLeft="1.3%"
        />
      </StrokeTitle4>
      <!-- 主要产成品产量 -->
      <StrokeTitle4
        title="主要产成品产量（标准箱/桶）"
        class="title_box_bc"
        style="width: 39.3%; height: 26.4%"
      >
        <div class="flex_center" slot="select">
          <!-- <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange4"
            /> -->

          <div class="all_box" style="margin-left: 0px" @click="planCount4All">
            全部
          </div>
        </div>
        <div class="flex_center Echarts" slot="content">
          <XRow
            barTop="10%"
            barBottom="0%"
            barWidth="6"
            :data="data4"
            xUnit=""
            barRight="10%"
            barLeft="10%"
            tooltipLabel=" 标准箱"
          />
        </div>
      </StrokeTitle4>
      <!-- 产能统计分析 -->
      <StrokeTitle4
        title="各基地十二月份产量（标准箱/桶）"
        class="float title_box_bc"
        style="width: 59.6%; height: 26.4%; margin-bottom: 1.5vh"
      >
        <div class="flex_center" slot="select">
          <!-- <ElementRadio v-model="model" :isButton="true" @change="radioChange3" :isCustomize="true" /> -->
        </div>
        <div class="Echarts" slot="content">
          <!-- <div class="calculagraph_left" style=" width: 25%;margin-left:15%">
              <Ring style="width: 120px; height: 120px" :data="{allRate:data3.allCount,baifenbi:data3.momRate}" :subtext="''" />
              <div class="label" style="position:relative;top:-2px;background:none">总产能</div>
            </div>
            <div class="calculagraph_right" style=" width: 60%;">
              <XRow barTop="10%" barBottom="0%" barWidth="6" :data="data3.dataList" xUnit="标准箱" barRight="19%" barLeft="10%" />
            </div> -->
          <ELine :data="data3" :axisLabelShow="false" />
        </div>
      </StrokeTitle4>

      <!-- 近三十日产能趋势 -->
      <StrokeTitle4
        title="近三十日产能趋势（标准箱/桶）"
        class="title_box_bc"
        style="width: 100%; height: 26.4%; margin-bottom: 1.5vh"
      >
        <div class="flex_center" slot="select"></div>
        <div class="Echarts flex_center" slot="content">
          <MoreDirection
            :data="data5"
            yUnit="标准箱"
            :legendData="['产量']"
            barWidth="15"
            style="height: calc(100% - 0px)"
            :yAxisLineShow="false"
            :xAxisLineShow="true"
            :isCategory="false"
            :isUnit="false"
            tooltipLabel=" "
            :isMoretooltip="true"
            gridRight="1%"
            gridLeft="1%"
            :axisLabelShow="false"
          />
        </div>
      </StrokeTitle4>
    </div>
    <!-- </div> -->
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import StrokeTitle4 from "@/components/myComponents/stroke/title4.vue";
import StrokeItem3 from "@/components/myComponents/stroke/item3.vue";
import {
  PlanCount1,
  PlanCount2,
  PlanCount3,
  PlanCount4,
  PlanCount5,
  productStock,
  PlanCount6,
} from "@/api/produce/index.js";
import { treeselect } from "@/api/equipment/materials/productConfig";
import { listDepot, getDepot } from "@/api/equipment/materials/depot";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: {
    StrokeTitle4,
    Treeselect,
    StrokeItem3,
  },
  name: "ProduceEchartsAll",
  data() {
    return {
      //实际计划分类完成度
      data1: {
        allCount: "0",
        allRate: 0,
        lastAllCount: 0,
        momRate: "0.00%",
        finishCount: "0",
      },
      data1Form: {
        pDateStart: this.$getMonth("s", 0),
        pDateEnd: this.$getMonth("e", 0),
        timeType: "1",
        deptId: "",
      },
      //实际计划完成度
      data2: [],
      //实际计划完成度
      data2Form: {
        pDateStart: this.$getMonth("s", 0),
        pDateEnd: this.$getMonth("e", 0),
      },
      model: "month",
      //实际计划分类完成度
      data3: [],
      //实际计划分类完成度表单
      data3Form: {
        pDateStart: this.$getMonth("s", 0),
        pDateEnd: this.$getMonth("e", 0),
        timeType: "1",
        deptId: "",
      },
      //主要产成品产量
      data4: [],
      //主要产成品产量表单
      data4Form: {
        pDateStart: this.$getMonth("s", 0),
        pDateEnd: this.$getMonth("e", 0),
        deptId: "",
        all: "",
      },

      //近三十日产能趋势
      data5: [],
      //近三十日产能趋势表单
      data5Form: {
        deptId: "",
      },
      //物资类型
      configOptions: [],
      // 所属仓库
      depotOptions: [],
      // 查询参数
      queryParams: {
        depotId: null,
        typeId: null,
      },
      //统计信息
      infoData: {
        stockMoney: 0,
        stockNum: 0,
        typeNum: 0,
      },
    };
  },
  watch: {
    // 监听typeId
    "queryParams.typeId": "productStock",
  },
  activated() {
    //实际计划分类完成度
    this.planCount1();
    //实际计划完成度
    this.planCount2();
    //实际计划分类完成度
    this.planCount3();
    //主要产成品产量
    this.planCount4();
    //近三十日产能趋势
    this.planCount5();
    //获取物资类型
    this.getTreeselect();
    //获取仓库列表
    this.getDepot();
    //获取统计信息数据
    this.productStock();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then((response) => {
        this.configOptions = response.data;
      });
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.typeName,
        children: node.children,
      };
    },
    //获取仓库列表
    getDepot() {
      listDepot({ type: "01", parentId: null, id: null }).then((response) => {
        this.depotOptions = response.data;
      });
    },

    //所属仓库修改
    changeDeptoId(e) {
      if (e == "") {
        this.queryParams.depotId = null;
      } else {
        this.queryParams.depotId = e;
      }
      //获取统计信息数据
      this.productStock();
    },
    //获取统计信息数据
    productStock() {
      productStock(this.queryParams).then((response) => {
        // console.log(response);
        if (response.code == 200) {
          this.infoData = response.data;
          this.infoData.typeNum = this.infoData.typeNum.toFixed(0);
          this.infoData.stockNum = this.infoData.stockNum.toFixed(0);
          this.infoData.stockMoney = this.infoData.stockMoney.toFixed(2);
        }
      });
    },
    //切换右上角基地
    selectListAll(e) {
      if (e != undefined) {
        this.data1Form.deptId = e;
        this.data2Form.deptId = e;
        this.data4Form.deptId = e;
        this.data3Form.deptId = e;
        this.data5Form.deptId = e;
      } else {
        this.data1Form.deptId = "";
        this.data2Form.deptId = "";
        this.data4Form.deptId = "";
        this.data5Form.deptId = "";
        this.data3Form.deptId = "";
      }
      this.planCount1();
      this.planCount2();
      this.planCount4();
      this.planCount3();
      this.planCount5();
    },
    //占比分析选择器切换
    selectList1(e) {},
    //实际计划分类完成度切换
    radioChange(e) {},
    //实际计划分类完成度
    planCount1() {
      PlanCount1(this.data1Form).then((res) => {
        this.data1 = res.data;
      });
    },
    //实际计划分类完成度时间切换
    radioChange1(event) {
      this.data1Form.pDateStart = event[0];
      this.data1Form.pDateEnd = event[1];
      this.data1Form.timeType = event[2];
      this.planCount1();
    },
    //实际计划分类完成度选择器切换
    selectList1(e) {
      if (e != undefined) {
        this.data1Form.deptId = e;
      } else {
        this.data1Form.deptId = "";
      }
      this.planCount1();
    },

    //实际计划完成度
    planCount2() {
      PlanCount2(this.data2Form).then((res) => {
        this.data2 = [];
        for (let item of res.data) {
          let obj = {};
          obj.name = item.name;
          obj.value1 = item.value1;
          obj.value2 = item.value2;
          obj.value3 = item.value3;
          obj.value4 = item.value4;
          this.data2.push(obj);
        }
      });
    },
    //实际计划完成度时间切换
    radioChange2(event) {
      this.data2Form.pDateStart = event[0];
      this.data2Form.pDateEnd = event[1];
      this.planCount2();
      this.data1Form.pDateStart = event[0];
      this.data1Form.pDateEnd = event[1];
      this.data1Form.timeType = event[2];
      this.planCount1();
      this.data4Form.pDateStart = event[0];
      this.data4Form.pDateEnd = event[1];
      this.planCount4();
    },
    //实际计划分类完成度选择器切换
    selectList3(e) {
      if (e != undefined) {
        this.data3Form.deptId = e;
      } else {
        this.data3Form.deptId = "";
      }
      this.planCount3();
    },
    //实际计划分类完成度时间切换
    radioChange3(event) {
      this.data3Form.pDateStart = event[0];
      this.data3Form.pDateEnd = event[1];
      this.data3Form.timeType = event[2];
      this.planCount3();
    },
    //实际计划分类完成度
    planCount3() {
      PlanCount6(this.data3Form).then((res) => {
        this.data3 = res.data;
        for (let item of this.data3) {
          item.value = Number(item.value).toFixed(0);
        }
        // if (this.data3.dataList.length > 0) {
        //   let arr = [];
        //   for (let item of this.data3.dataList) {
        //     let obj = {};
        //     obj.name = item.name;
        //     obj.value = item.value1;
        //     arr.push(obj);
        //   }
        //   this.data3.dataList = arr;
        // }
      });
    },
    //主要产成品产量时间切换
    radioChange4(event) {
      this.data4Form.pDateStart = event[0];
      this.data4Form.pDateEnd = event[1];
      this.planCount4();
    },
    //主要产成品产量选择器切换
    selectList4(e) {
      if (e != undefined) {
        this.data4Form.deptId = e;
      } else {
        this.data4Form.deptId = "";
      }
      this.planCount4();
    },
    //主要产成品产量-全部
    planCount4All() {
      let obj = JSON.parse(JSON.stringify(this.data4Form));
      obj.all = "111";
      PlanCount4(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.unit = " 标准箱";
          for (let item of res.data) {
            item.name = item.name + " (计划量:" + item.value2 + ")";
            item.value = Number(item.value).toFixed(0);
            item.name =
              item.name +
              " (完成占比:" +
              ((Number(item.value) / Number(item.value2)) * 100).toFixed(2) +
              "%)";
          }

          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.right.unit = "";
        }
        this.$refs.AllDialog.dialogTableVisible = true;
      });
    },
    //主要产成品产量
    planCount4() {
      PlanCount4(this.data4Form).then((res) => {
        this.data4 = res.data;
        for (let item of this.data4) {
          item.value = Number(item.value).toFixed(0);
          item.name =
            item.name +
            "(完成占比:" +
            ((Number(item.value) / Number(item.value2)) * 100).toFixed(2) +
            "%)";
        }
      });
    },
    //近三十日产能趋势选择器切换
    selectList5(e) {
      if (e != undefined) {
        this.data5Form.deptId = e;
      } else {
        this.data5Form.deptId = "";
      }
      this.planCount5();
    },
    //近三十日产能趋势
    planCount5() {
      PlanCount5(this.data5Form).then((res) => {
        this.data5 = [];
        for (let item of res.data) {
          let obj = {};
          obj.name = item.day;
          obj.value1 = Number(item.count).toFixed(0);
          if (item.name != "") {
            obj.valueArr = item.name.split(",");
          } else {
            obj.valueArr = [];
          }
          this.data5.push(obj);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts_box[data-v-d80da0fe] {
  width: 25%;
}
.app-main {
  padding-bottom: 0 !important;
}
.title_box_bc {
  box-shadow: 0 0 3px 3px rgb(52 112 167 / 90%);
  .calculagraph_right,
  .calculagraph_left {
    width: 40%;
    height: 100%;
    // background: red;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative;
    float: left;
    // margin-left: 4%;
  }
  .calculagraph_right {
    align-items: flex-start;
    justify-content: center;
    width: 35%;
    height: 95%;
    margin-left: 0%;
  }
  @media screen and (max-width: 1000px) {
    .calculagraph_right {
      height: 100%;
    }
  }
}
.seven_content {
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  // .content_center {
  width: 100%;
  height: 130%;
  padding-bottom: 2px;
  overflow: hidden;
  overflow-y: auto;
  .title_box {
    position: relative;
    .top {
      height: 35px;
      width: 100%;
      border-bottom: 1px solid #2a8cf04a;
      display: flex;
      padding: 0 15px;
      align-items: center;
      .border {
        width: 3px;
        height: 16px;
        background: #06ffff;
      }
      span {
        font-size: 16px;
        font-family: Adobe Heiti Std, Adobe Heiti Std-R;
        font-weight: R;
        text-align: left;
        margin-left: 10px;
        color: #ffffff;
      }
    }
  }
  // }
  // .content_center {
  .echartsBox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0.8% 0.8% 0%;
    margin-bottom: 14vh;
  }

  // }
  .Echarts {
    height: calc(100% - 50px);
  }
  @media screen and (max-width: 1000px) {
    .Echarts {
      height: calc(100% - 2px);
    }
  }
  .PieGauge_box {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .center2 {
    width: 40%;
  }
  .center_echarts {
    height: 180px;
  }
}
.seven_content::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  cursor: pointer !important;
}
</style>
